import { LoginInfo } from "../../api/modules/index.js";
import { mix } from "../../utils/color.js";
import { ElMessage, ElNotification } from "element-plus";
import store from "../index.js";
import router from "../../router/router.js";
export default {
  namespaced: true,
  state: {
    menu: [],
    UserInfo: sessionStorage.getItem("UserInfo") || "",
    token: localStorage.getItem("token") || "",
    isCollapse: true,
    themeConfig: {
      primary: "#4060c7",
      tabColor: "#FFFFFF",
      footColor: "#606266",
      backgroundColor: "#FFFFFF",
      textColor: "#00000099",
      istags: true,
    },
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    setUserInfo(state, userinfo) {
      state.UserInfo = userinfo;
    },
    SetIsCollapse(state, isCollapse) {
      state.isCollapse = isCollapse;
    },
    setThemeConfig(state, primary) {
      state.themeConfig.primary = primary;
    },
    setThemeConfigTbaColor(state, primary) {
      state.themeConfig.tabColor = primary;
      if (primary == "#FFFFFF") {
        state.themeConfig.footColor = "#606266";
      } else {
        state.themeConfig.footColor = "#ffffff";
      }
    },
    setThemeConfigMenuColor(state, primary) {
      if (primary) {
        state.themeConfig.backgroundColor = "#FFFFFF";
        state.themeConfig.textColor = "#00000099";
      } else {
        state.themeConfig.backgroundColor = "#1d2129";
        state.themeConfig.textColor = "#bdbdc0";
      }
    },
    setThemeConfigchangeTags(state, primary) {
      if (primary) {
        state.themeConfig.istags = true;
      } else {
        state.themeConfig.istags = false;
      }
    },
    setMenu(state, val) {
      state.menu = val;
      localStorage.setItem("menu", JSON.stringify(val));
    },
    addMenu(state, val) {
      if (localStorage.getItem("menu") == undefined) {
        return;
      }
      state.menu = JSON.parse(localStorage.getItem("menu"));
      console.log(state.menu);
      fn(state.menu)
    },
  },
  actions: {
    login({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        LoginInfo(userInfo)
          .then((res) => {
            if (res.data.code == 200) {
              localStorage.setItem("token", res.data.data.token);
              sessionStorage.setItem("UserInfo", JSON.stringify(res.data.data));
              commit("setToken", res.data.data.token);
              commit("setUserInfo", res.data.data);
              let type = JSON.parse(res.data.data.UserInfo).userType;
              if (type === "1") {
                store.commit("tabs/initTag", 1);
                router.replace("/home");
              } else {
                store.commit("tabs/initTag", 0);
                router.replace("/userhome");
              }
              ElNotification({
                message: "登录成功",
                type: "success",
              });
              resolve();
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    changeIsCollapse({ commit }, str) {
      console.log(str);
      commit("SetIsCollapse", str);
    },

    changeThem({ commit }, str) {
      commit("setThemeConfig", str);
      const pre = "--el-color-primary";
      // 白色混合色
      const mixWhite = "#ffffff";
      // 黑色混合色
      const mixBlack = "#000000";
      const el = document.documentElement;
      el.style.setProperty(pre, str);
      // 这里是覆盖原有颜色的核心代码
      for (let i = 1; i < 10; i += 1) {
        el.style.setProperty(`${pre}-light-${i}`, mix(str, mixWhite, i * 0.1));
      }
      el.style.setProperty("--el-color-primary-dark", mix(str, mixBlack, 0.1));
    },
    changeTabColor({ commit }, val) {
      commit("setThemeConfigTbaColor", val);
    },
    changeMenuColor({ commit }, val) {
      commit("setThemeConfigMenuColor", val);
    },
    changeTags({ commit }, val) {
      commit("setThemeConfigchangeTags", val);
    },
  },
};
const fn = (menus) => {
  menus.forEach((item) => {
    if (!item.children) {
      router.addRoute('main', {
        name: item.title,
        path: item.url,
        component: () => import(`../../views/${item.component}/index.vue`)
      })
    } else {
      fn(item.children)
    }
  })
}